<template>
    <div style="height: 100vh;z-index: 1;position: relative;background-color:#FFFFFF;">
        <div @click="goback" class="goback">返回</div>
        <div class="login">
            <input @blur="judgeAccount" @focus="this.account_tip1=false,this.account_tip2=false" v-model="register.account" class="box" placeholder="请输入手机号"  type="text">
            <div v-if="account_tip1" class="tip">手机号格式错误</div>
            <div v-if="account_tip2" class="tip">手机号已注册</div>
            <input v-model="register.username" @focus="this.account_tip1=false" class="box" placeholder="请输入用户名"  type="text">
            <div v-if="username_tip" class="tip">用户名格式错误</div>
            <input @blur="judgePassword" @focus="this.password_tip=false" v-model="register.password" class="box" placeholder="请输入密码(以字母开头，字母和数字组合6~18位)" type="password" >
            <div v-if="password_tip" class="tip">密码格式错误</div>
            <input @blur="judgePasswords" @focus="this.passwords_tip=false" v-model="register.passwords" class="box" placeholder="请确认密码" type="password" >
            <div v-if="passwords_tip" class="tip">两次密码不一致</div>
            <div style="display: flex">
                <div @click="isRegister" class="register-button">
                    注册
                </div>
            </div>
        </div>
        <div class="success" v-if="show">
            <div class="suc-font">
                注册成功!!!
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'register',
        data(){
            return{

                show:false,
                account_tip1:false,
                account_tip2:false,
                username_tip:false,
                password_tip:false,
                passwords_tip:false,
                register:{
                    account:'',
                    password:'',
                    passwords:'',
                    username:''
                }
            }
        },
        methods:{
            goback(){
                this.$router.go(-1)
            },
            judgePasswords(){
                let x=this.register.password
                let y=this.register.passwords
                if(x!=y){
                    this.passwords_tip = !this.passwords_tip;
                } else {
                    this.passwords_tip=false
                }
            },
            judgeAccount(){
                let x=this.register.account
                let pattern=/^1[3456789]\d{9}$/
                let isaccount=pattern.test(x)
                if(!isaccount) {
                    this.account_tip1=!this.account_tip1
                }
                else{
                    this.$axios({
                        method:'post',
                        url:'/isRegister',
                        data:{
                            account:this.register.account
                        }
                    }).then((res)=>{
                        if(res.status==200){
                            this.account_tip2=!this.account_tip2
                        }
                        else {
                            this.account_tip2=false
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                }

            },
            judgePassword(){
                let x=this.register.password
                let pattern= /^[a-zA-Z]\w{6,18}$/
                    // /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/
                let ispassword=pattern.test(x)
                if(ispassword) this.password_tip=false
                else this.password_tip=!this.password_tip
            },
            isRegister(){
                //console.log(this.register)

                this.$axios({
                	method: "post",
                	url:'/register',
                    data:this.register
                }).then((res)=> {
                    //注册成功后跳转
                    //注册成功提示
                    this.show = !this.show;
                    setTimeout(()=>{
                        this.show = !this.show;this.$router.push('/login')
                    },2000);

                    //console.log(res.data);
                }).catch(function (error) {
                    console.log(error);
                })
            }
        }
    }
</script>

<style scoped>
    .success{
        width: 80vw; height: 28vh;
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        /* 50%为自身尺寸的一半 */
        text-align: center;
    }
    .suc-font{
        height: 28vh;
        line-height: 28vh;
        font-size: 32px;
        font-weight: bold;
        border-radius: 8vh;
        color: #FFFFFF;
        background-color: #38ca73;
    }
    .tip{
        align-self: flex-start;padding-left: 12vw;color: red;font-size: 14px;
    }
    .goback{
        width: 96vw;
        height: 6vh;
        line-height: 6vh;
        font-size: 20px;
        font-weight: bold;
        padding-left: 4vw;
        background-color: #eeeeee;
        color: #aaaaaa;
    }
    .login{
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding-top: 3vh;
    }
    .box{
        height: 5vh;
        width: 75%;
        margin: 10px 0;
        font-size: 12px;
        border: none;
        border-bottom: 0.5px solid #555555;
    }
    .register-button{
        width: 25vw;
        height: 5vh;
        font-size: 20px;
        font-weight: 600;
        line-height: 5vh;
        border-radius: 25px;
        background-color: #38ca73;
        text-align: center;
        color: #FFFFFF;
        margin: 5vw 8vw ;
    }
</style>
